/**
 * Created by Administrator on 2017/5/24 0024.
 */
// 引入base和moveFrame运动框架
import base from './common/base'
import copy from 'clipboard-copy'
import {
    moveFrame
} from './common/moveFrame'

// 点击图标更换背景
var bgSrc = [
    "url('../src/images/bg1.png')",
    "url('../src/images/bg2.gif')",
    "url('../src/images/bg3.jpg')",
    "url('../src/images/bg4.png')"
];

function bgSwitch() {
    var spansBox = document.getElementById("section-1__bgSwitch");
    var spans = spansBox.getElementsByTagName('span');
    var tips = spansBox.getElementsByTagName('div')[0]
    for (var i = 0; i < spans.length; i++) {
        spans[i].index = i;
        spans[i].onclick = function () {
            document.body.style.backgroundImage = bgSrc[this.index];
        }
        spans[i].onmouseover = function () {
            base.addClass(tips, 'section-1__bgSwitch-tips__status_animate')
        };
        spans[i].onmouseout = function () {
            base.removeClass(tips, 'section-1__bgSwitch-tips__status_animate')
        }
    }

}
bgSwitch();

// 第二板块tab栏的切换
function tabs() {
    var icons = document.getElementById("section-2__icon").children;
    var imgs = document.getElementById("section-2__content").children;
    for (var i = 0; i < icons.length; i++) {
        icons[i].index = i;
        icons[i].onclick = function () {
            for (var j = 0; j < icons.length; j++) {
                imgs[j].className = "";
                base.removeClass(icons[j], "current");
            }
            imgs[this.index].className = "show";
            base.addClass(this, "current");
        }
    }
}
tabs();

// 第三板块图钉特效
function tuding() {
    var content = document.getElementById("section-3__content");
    var tuding = document.getElementById("tuding2")
    var tips = content.getElementsByTagName('p')[0];
    var main = content.getElementsByTagName("div")[0];
    content.onmouseover = function () {
        base.addClass(tuding, "section-3__tuding-2__status_animate");
        base.addClass(tips, "section-3__content__tips__status_animate");
        base.addClass(main, "section-3__content__main__status_animate");
    };
    content.onmouseout = function () {
        base.removeClass(tuding, "section-3__tuding-2__status_animate");
        base.removeClass(tips, "section-3__content__tips__status_animate")
        base.removeClass(main, "section-3__content__main__status_animate");
    }
}
tuding();


// 第四板块 carrousel
var itemDate = [
    {
        width: 500,
        top: 50,
        left: 340,
        opacity: 0.6,
        z: 3
    },
    {
        width: 500,
        top: 100,
        left: 0,
        opacity: 0.9,
        z: 4
    },
    {
        width: 600,
        top: 150,
        left: 294,
        opacity: 1,
        z: 5
    },
    {
        width: 500,
        top: 100,
        left: 687,
        opacity: 0.9,
        z: 4
    }
    // { // 6
    //     width: 400,
    //     top: 50,
    //     left: 737,
    //     opacity: 0.6,
    //     z: 3
    // }
]

function carrousel() {
    var items = document.querySelectorAll(".section-4__carrousel-item");
    var prev = base.getElem(".arrow-prev");
    var next = base.getElem(".arrow-next");

    for (var i = 0; i < itemDate.length; i++) {

        items[i].style.width = itemDate[i].width + 'px';
        items[i].style.top = itemDate[i].top + 'px';
        items[i].style.left = itemDate[i].left + 'px';
        items[i].style.opacity = itemDate[i].opacity;
        items[i].style.zIndex = itemDate[i].z

    };

    // 点击左侧按钮，移除第一个放到最后一个。
    prev.onclick = function () {
        change(false)
    };
    // 点击右侧按钮，移除最后一个放到第一个。
    next.onclick = function () {
        change(true)
    }

    function change(flag) {
        if (flag) {
            itemDate.unshift(itemDate.pop());
        } else {
            itemDate.push(itemDate.shift());
        };

        for (var i = 0; i < itemDate.length; i++) {
            moveFrame(items[i], {
                width: itemDate[i].width,
                top: itemDate[i].top,
                left: itemDate[i].left,
                opacity: itemDate[i].opacity,
                zIndex: itemDate[i].z
            });
        };
    };
};
carrousel();

var qqbtn = document.getElementById('qqbtn');
var emailbtn = document.getElementById('emailbtn');
var mobilebtn = document.getElementById('mobilebtn');
qqbtn.addEventListener('click', function () {
    copy('543872989')
    alert('复制成功！')
})
emailbtn.addEventListener('click', function () {
    copy('15872358009@163.com')
    alert('复制成功！')
})
mobilebtn.addEventListener('click', function () {
    copy('15872358009')
    alert('复制成功！')
})